@import "./index.css";

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

/* 定义 dark 模式的颜色 */
:root {
  --accent: #3493d1;
  --main: #f3f3f3;
  --light: #ececec;
  --lighter: #666;
  --border: #e6e6e6;
  --bg: #333333;
  --dktitle: #eccb4d;
  --normalColor: #2c3e50;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--light);
  height: 100%;
  width: 100%;
  background: var(--bg);
}

.flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;

  .flex-inner {
    width: 300px;
    height: auto;
    background: var(--light);
  }
}

.login {
  h2 {
    text-align: center;
  }

  form {
    padding: 3px 1rem;
  }
}

.home {
  width: 100%;
  height: 100%;
  position: relative;

  .navbar {
    background: var(--lighter);

    .van-nav-bar__left,
    .van-nav-bar__right {

      i,
      span {
        color: var(--light);
      }
    }

    // --accent
    .van-nav-bar__title {
      color: var(--dktitle)
    }
  }

  .tagName {
    background: var(--lighter);
    padding-top: 1rem;
    margin-top: 1rem;

    h4 {
      margin-top: 0;
      margin-left: 1rem;
      color: var(--accent);
    }

    .van-tabbar-item {
      background: var(--lighter);
      color: var(--dktitle);
    }

    .van-tabbar-item--active {
      color: var(--light);

      .van-tabbar-item__text {
        font-weight: bolder;
      }
    }
  }

  .tagList {
    background: var(--lighter);
    padding-top: 1rem;
    margin-top: 1rem;

    h4 {
      margin-top: 0;
      margin-left: 1rem;
      color: var(--accent);
    }

    .listBar {
      .van-cell {
        background: var(--lighter);
        color: var(--dktitle);

        &::after {
          border-bottom-width: 2px;
        }
      }
    }
  }
}

.footer {
  width: 100%;
  height: 24px;
  position: absolute;
  z-index: 9999;
  bottom: 0;
  left: 0;
  h4 {
    margin: 3px 0;
    text-align: center;
  }
}

.video {
  .navbar {
    background: var(--lighter);

    .van-nav-bar__left,
    .van-nav-bar__right {

      i,
      span {
        color: var(--light);
      }
    }

    // --accent
    .van-nav-bar__title {
      color: var(--dktitle)
    }
  }
}